@{
    ViewData["Title"] = "公开链接功能说明文档";
}

<div class="container-fluid">
    <!-- 页面标题 -->
    <div class="row">
        <div class="col-12">
            <h2>@ViewData["Title"]</h2>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a asp-action="Index">公章申请</a></li>
                    <li class="breadcrumb-item active">公开链接功能说明</li>
                </ol>
            </nav>
        </div>
    </div>
    
    <!-- 主要内容区域 -->
    <div class="row">
        <!-- 主要内容 -->
        <div class="col-12">
            <!-- 功能概述 -->
            <section id="overview" class="mb-5">
                <div class="card">
                    <div class="card-header">
                        <h4 class="mb-0">📋 功能概述</h4>
                    </div>
                    <div class="card-body">
                        <p class="lead">公开链接提交审批是工作流引擎的一项高级功能，允许审批人通过公开链接直接查看和处理申请，无需登录系统。</p>
                        
                        <div class="alert alert-info">
                            <h5><i class="bi bi-info-circle"></i> 核心价值</h5>
                            <ul class="mb-0">
                                <li><strong>简化审批流程</strong>：无需复杂的系统登录，直接通过链接访问</li>
                                <li><strong>提升用户体验</strong>：特别适合外部审批人员和移动端使用</li>
                                <li><strong>增强系统集成</strong>：支持iframe嵌入，方便第三方系统集成</li>
                                <li><strong>智能通信机制</strong>：PostMessage通信确保页面高度自适应</li>
                            </ul>
                        </div>
                        
                        <div class="row">
                            <div class="col-md-6">
                                <h5>🔗 公开链接特性</h5>
                                <ul class="list-group list-group-flush">
                                    <li class="list-group-item d-flex align-items-center">
                                        <i class="bi bi-check-circle text-success me-2"></i>
                                        无需系统登录
                                    </li>
                                    <li class="list-group-item d-flex align-items-center">
                                        <i class="bi bi-check-circle text-success me-2"></i>
                                        独立页面布局
                                    </li>
                                    <li class="list-group-item d-flex align-items-center">
                                        <i class="bi bi-check-circle text-success me-2"></i>
                                        iframe友好集成
                                    </li>
                                    <li class="list-group-item d-flex align-items-center">
                                        <i class="bi bi-check-circle text-success me-2"></i>
                                        PostMessage通信
                                    </li>
                                    <li class="list-group-item d-flex align-items-center">
                                        <i class="bi bi-check-circle text-success me-2"></i>
                                        自适应高度调整
                                    </li>
                                </ul>
                            </div>
                            <div class="col-md-6">
                                <h5>🎯 适用场景</h5>
                                <ul class="list-group list-group-flush">
                                    <li class="list-group-item d-flex align-items-center">
                                        <i class="bi bi-people text-primary me-2"></i>
                                        外部审批人员
                                    </li>
                                    <li class="list-group-item d-flex align-items-center">
                                        <i class="bi bi-phone text-primary me-2"></i>
                                        移动端审批
                                    </li>
                                    <li class="list-group-item d-flex align-items-center">
                                        <i class="bi bi-diagram-3 text-primary me-2"></i>
                                        第三方系统集成
                                    </li>
                                    <li class="list-group-item d-flex align-items-center">
                                        <i class="bi bi-lightning text-primary me-2"></i>
                                        简化审批流程
                                    </li>
                                    <li class="list-group-item d-flex align-items-center">
                                        <i class="bi bi-arrow-left-right text-primary me-2"></i>
                                        跨系统协作
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <!-- 功能对比 -->
            <section id="comparison" class="mb-5">
                <div class="card">
                    <div class="card-header">
                        <h4 class="mb-0">⚖️ 功能对比</h4>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-striped table-hover">
                                <thead class="table-dark">
                                    <tr>
                                        <th>对比项目</th>
                                        <th><i class="bi bi-person-lock"></i> 普通提交</th>
                                        <th><i class="bi bi-link-45deg"></i> 公开链接提交</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td><strong>访问方式</strong></td>
                                        <td><span class="badge bg-warning">需要系统登录</span></td>
                                        <td><span class="badge bg-success">直接链接访问</span></td>
                                    </tr>
                                    <tr>
                                        <td><strong>页面布局</strong></td>
                                        <td>完整系统布局（含导航、菜单）</td>
                                        <td>独立页面布局（Layout = null）</td>
                                    </tr>
                                    <tr>
                                        <td><strong>集成能力</strong></td>
                                        <td>系统内嵌入</td>
                                        <td><span class="badge bg-info">iframe友好</span></td>
                                    </tr>
                                    <tr>
                                        <td><strong>FormLink设置</strong></td>
                                        <td><code>null</code> 或内部链接</td>
                                        <td><code>/OfficialSealApplication/PublicDetails/{id}</code></td>
                                    </tr>
                                    <tr>
                                        <td><strong>安全级别</strong></td>
                                        <td><span class="badge bg-success">高</span>（需认证）</td>
                                        <td><span class="badge bg-warning">中</span>（链接控制）</td>
                                    </tr>
                                    <tr>
                                        <td><strong>移动端适配</strong></td>
                                        <td>一般</td>
                                        <td><span class="badge bg-success">优秀</span></td>
                                    </tr>
                                    <tr>
                                        <td><strong>第三方集成</strong></td>
                                        <td>复杂</td>
                                        <td><span class="badge bg-success">简单</span></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        
                        <div class="alert alert-success" role="alert">
                            <h6><i class="bi bi-lightbulb"></i> 选择建议</h6>
                            <ul class="mb-0">
                                <li><strong>选择普通提交</strong>：内部员工、需要完整系统功能、安全要求高</li>
                                <li><strong>选择公开链接提交</strong>：外部审批、移动端使用、第三方系统集成</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </section>

            <!-- 技术原理 -->
            <section id="technical" class="mb-5">
                <div class="card">
                    <div class="card-header">
                        <h4 class="mb-0">🔧 技术原理</h4>
                    </div>
                    <div class="card-body">
                        <div class="accordion" id="technicalAccordion">
                            <!-- PostMessage通信机制 -->
                            <div class="accordion-item">
                                <h2 class="accordion-header">
                                    <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#postMessage" aria-expanded="true">
                                        <i class="bi bi-chat-square-dots me-2"></i>PostMessage通信机制
                                    </button>
                                </h2>
                                <div id="postMessage" class="accordion-collapse collapse show" data-bs-parent="#technicalAccordion">
                                    <div class="accordion-body">
                                        <p>公开页面通过HTML5 PostMessage API与父页面进行通信，实现高度自适应和交互功能。</p>
                                        <pre><code class="language-javascript">// 发送高度消息给父页面
window.parent.postMessage({
    event: 'setFormIframeHeight',
    height: currentHeight
}, '*');

// 监听窗口大小变化
window.addEventListener('resize', function() {
    setTimeout(sendHeightMessage, 100);
});</code></pre>
                                        <div class="alert alert-info">
                                            <strong><i class="bi bi-gear"></i> 技术要点：</strong>
                                            <ul class="mb-0">
                                                <li>跨域安全通信</li>
                                                <li>实时高度监测</li>
                                                <li>事件驱动更新</li>
                                                <li>异常处理机制</li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- iframe高度自适应 -->
                            <div class="accordion-item">
                                <h2 class="accordion-header">
                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#iframeHeight">
                                        <i class="bi bi-arrows-expand me-2"></i>iframe高度自适应
                                    </button>
                                </h2>
                                <div id="iframeHeight" class="accordion-collapse collapse" data-bs-parent="#technicalAccordion">
                                    <div class="accordion-body">
                                        <p>Vue.js组件LinkFormRender.vue实现了智能的iframe高度自适应功能。</p>
                                        <pre><code class="language-javascript">// 监听高度变化消息
const onIframeSizeChange = (e) => {
    if (e && e.data && e.data.event === "setFormIframeHeight") {
        sizeRef.value.height = e.data.height + "px";
    }
};

// 动态高度计算
const getPageHeight = () => {
    return Math.max(
        document.body.scrollHeight,
        document.body.offsetHeight,
        document.documentElement.clientHeight,
        document.documentElement.scrollHeight,
        document.documentElement.offsetHeight
    );
};</code></pre>
                                        <div class="alert alert-warning">
                                            <strong><i class="bi bi-exclamation-triangle"></i> 注意事项：</strong>
                                            <ul class="mb-0">
                                                <li>跨域限制时的fallback处理</li>
                                                <li>防止频繁触发高度调整</li>
                                                <li>不同浏览器的兼容性处理</li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- FormLink技术实现 -->
                            <div class="accordion-item">
                                <h2 class="accordion-header">
                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#formLink">
                                        <i class="bi bi-link me-2"></i>FormLink技术实现
                                    </button>
                                </h2>
                                <div id="formLink" class="accordion-collapse collapse" data-bs-parent="#technicalAccordion">
                                    <div class="accordion-body">
                                        <p>通过设置FormLink参数，工作流引擎可以指向不同的表单显示页面。</p>
                                        <pre><code class="language-csharp">// 公开链接提交时的FormLink设置
var createDto = new CreateWorkTaskWithDefaultVersionInputDto
{
    EntityFullName = "OfficialSealApplication",
    EntityKeyValue = id.ToString(),
    FormLink = usePublicLink
        ? $"{Request.Scheme}://{Request.Host}/OfficialSealApplication/PublicDetails/{id}"
        : null,
    // ... 其他参数
};</code></pre>
                                        <div class="alert alert-success">
                                            <strong><i class="bi bi-check-circle"></i> 设计优势：</strong>
                                            <ul class="mb-0">
                                                <li>动态构造URL确保环境适配</li>
                                                <li>支持HTTPS安全协议</li>
                                                <li>灵活的跨域访问配置</li>
                                                <li>统一的工作流集成机制</li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 工作流集成机制 -->
                            <div class="accordion-item">
                                <h2 class="accordion-header">
                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#workflowIntegration">
                                        <i class="bi bi-diagram-2 me-2"></i>工作流集成机制
                                    </button>
                                </h2>
                                <div id="workflowIntegration" class="accordion-collapse collapse" data-bs-parent="#technicalAccordion">
                                    <div class="accordion-body">
                                        <p>公开链接功能与工作流引擎的深度集成，确保审批流程的一致性。</p>
                                        <div class="row">
                                            <div class="col-md-6">
                                                <h6>核心流程</h6>
                                                <ol>
                                                    <li>创建工作任务</li>
                                                    <li>设置FormLink参数</li>
                                                    <li>启动工作流</li>
                                                    <li>状态同步</li>
                                                </ol>
                                            </div>
                                            <div class="col-md-6">
                                                <h6>状态管理</h6>
                                                <ul>
                                                    <li>WorkTaskStateInfo表</li>
                                                    <li>事件驱动更新</li>
                                                    <li>实时状态同步</li>
                                                    <li>异常处理机制</li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <!-- 使用指南 -->
            <section id="guide" class="mb-5">
                <div class="card">
                    <div class="card-header">
                        <h4 class="mb-0">📖 使用指南</h4>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-12">
                                <h5><i class="bi bi-play-circle"></i> 操作流程</h5>
                                <div class="timeline">
                                    <div class="timeline-item">
                                        <div class="timeline-marker bg-primary"></div>
                                        <div class="timeline-content">
                                            <h6>步骤1：选择提交方式</h6>
                                            <p>在申请详情页面，选择"提交审批（公开链接）"按钮</p>
                                            <small class="text-muted">注意：区别于普通的"提交审批"按钮</small>
                                        </div>
                                    </div>
                                    <div class="timeline-item">
                                        <div class="timeline-marker bg-info"></div>
                                        <div class="timeline-content">
                                            <h6>步骤2：确认提交</h6>
                                            <p>系统会弹出确认对话框，确认使用公开链接模式</p>
                                            <small class="text-muted">提示："将使用公开链接"</small>
                                        </div>
                                    </div>
                                    <div class="timeline-item">
                                        <div class="timeline-marker bg-success"></div>
                                        <div class="timeline-content">
                                            <h6>步骤3：工作流启动</h6>
                                            <p>系统创建工作流任务，设置FormLink指向公开页面</p>
                                            <small class="text-muted">FormLink: /OfficialSealApplication/PublicDetails/{id}</small>
                                        </div>
                                    </div>
                                    <div class="timeline-item">
                                        <div class="timeline-marker bg-warning"></div>
                                        <div class="timeline-content">
                                            <h6>步骤4：审批流转</h6>
                                            <p>审批人通过公开链接访问和处理申请</p>
                                            <small class="text-muted">无需登录系统，直接访问</small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <hr>
                        
                        <div class="row">
                            <div class="col-md-6">
                                <h5><i class="bi bi-check-square"></i> 最佳实践</h5>
                                <div class="list-group">
                                    <div class="list-group-item d-flex align-items-start">
                                        <i class="bi bi-check-circle text-success me-2 mt-1"></i>
                                        <div>
                                            <strong>网络环境检查</strong>
                                            <p class="mb-0 small text-muted">确保网络环境支持iframe访问和PostMessage通信</p>
                                        </div>
                                    </div>
                                    <div class="list-group-item d-flex align-items-start">
                                        <i class="bi bi-check-circle text-success me-2 mt-1"></i>
                                        <div>
                                            <strong>功能测试</strong>
                                            <p class="mb-0 small text-muted">提交前测试公开页面显示效果和高度自适应</p>
                                        </div>
                                    </div>
                                    <div class="list-group-item d-flex align-items-start">
                                        <i class="bi bi-check-circle text-success me-2 mt-1"></i>
                                        <div>
                                            <strong>兼容性验证</strong>
                                            <p class="mb-0 small text-muted">在不同浏览器和设备上验证显示效果</p>
                                        </div>
                                    </div>
                                    <div class="list-group-item d-flex align-items-start">
                                        <i class="bi bi-check-circle text-success me-2 mt-1"></i>
                                        <div>
                                            <strong>安全配置</strong>
                                            <p class="mb-0 small text-muted">检查跨域访问配置和CSP设置</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <h5><i class="bi bi-exclamation-triangle"></i> 注意事项</h5>
                                <div class="list-group">
                                    <div class="list-group-item d-flex align-items-start">
                                        <i class="bi bi-exclamation-triangle text-warning me-2 mt-1"></i>
                                        <div>
                                            <strong>安全性考虑</strong>
                                            <p class="mb-0 small text-muted">公开链接安全性相对较低，适用于内部或可信环境</p>
                                        </div>
                                    </div>
                                    <div class="list-group-item d-flex align-items-start">
                                        <i class="bi bi-exclamation-triangle text-warning me-2 mt-1"></i>
                                        <div>
                                            <strong>链接管理</strong>
                                            <p class="mb-0 small text-muted">考虑链接有效期管理和访问权限控制</p>
                                        </div>
                                    </div>
                                    <div class="list-group-item d-flex align-items-start">
                                        <i class="bi bi-exclamation-triangle text-warning me-2 mt-1"></i>
                                        <div>
                                            <strong>审批权限</strong>
                                            <p class="mb-0 small text-muted">确认审批人员具有相应的审批权限</p>
                                        </div>
                                    </div>
                                    <div class="list-group-item d-flex align-items-start">
                                        <i class="bi bi-exclamation-triangle text-warning me-2 mt-1"></i>
                                        <div>
                                            <strong>移动端适配</strong>
                                            <p class="mb-0 small text-muted">在移动设备上进行充分的兼容性测试</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <!-- 常见问题 -->
            <section id="faq" class="mb-5">
                <div class="card">
                    <div class="card-header">
                        <h4 class="mb-0">❓ 常见问题</h4>
                    </div>
                    <div class="card-body">
                        <div class="accordion" id="faqAccordion">
                            <div class="accordion-item">
                                <h2 class="accordion-header">
                                    <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#faq1" aria-expanded="true">
                                        Q: 公开链接和普通提交有什么区别？
                                    </button>
                                </h2>
                                <div id="faq1" class="accordion-collapse collapse show" data-bs-parent="#faqAccordion">
                                    <div class="accordion-body">
                                        <strong>A:</strong> 主要区别在于访问方式和页面布局：
                                        <ul>
                                            <li><strong>普通提交</strong>：需要登录系统，使用完整的系统布局</li>
                                            <li><strong>公开链接提交</strong>：可以直接通过链接访问，使用独立的页面布局，更适合iframe集成</li>
                                        </ul>
                                        <div class="alert alert-info mt-2">
                                            <small><i class="bi bi-lightbulb"></i> 建议在需要外部审批或移动端使用时选择公开链接模式</small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="accordion-item">
                                <h2 class="accordion-header">
                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq2">
                                        Q: 公开链接是否安全？
                                    </button>
                                </h2>
                                <div id="faq2" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                                    <div class="accordion-body">
                                        <strong>A:</strong> 公开链接具有一定的安全性，但相对较低：
                                        <ul>
                                            <li>链接本身包含随机ID，具有一定的隐蔽性</li>
                                            <li>页面只提供只读功能，不能修改数据</li>
                                            <li>建议配合链接有效期管理</li>
                                            <li>适用于内部或可信任的审批场景</li>
                                        </ul>
                                        <div class="alert alert-warning mt-2">
                                            <small><i class="bi bi-shield-exclamation"></i> 生产环境建议使用HTTPS并配置适当的安全策略</small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="accordion-item">
                                <h2 class="accordion-header">
                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq3">
                                        Q: iframe高度不能自适应怎么办？
                                    </button>
                                </h2>
                                <div id="faq3" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                                    <div class="accordion-body">
                                        <strong>A:</strong> iframe高度自适应问题的解决方法：
                                        <ol>
                                            <li>检查PostMessage事件监听是否正常</li>
                                            <li>确认父页面和子页面的域名配置</li>
                                            <li>验证JavaScript控制台是否有错误信息</li>
                                            <li>测试不同浏览器的兼容性</li>
                                            <li>检查CSP(Content Security Policy)设置</li>
                                        </ol>
                                        <div class="alert alert-info mt-2">
                                            <small><i class="bi bi-tools"></i> 可以通过浏览器开发者工具查看PostMessage通信日志</small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="accordion-item">
                                <h2 class="accordion-header">
                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq4">
                                        Q: 如何在第三方系统中集成公开链接页面？
                                    </button>
                                </h2>
                                <div id="faq4" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                                    <div class="accordion-body">
                                        <strong>A:</strong> 第三方系统集成步骤：
                                        <ol>
                                            <li>使用iframe标签嵌入公开链接页面</li>
                                            <li>监听PostMessage事件处理高度变化</li>
                                            <li>配置合适的iframe样式和安全策略</li>
                                            <li>测试跨域访问和通信功能</li>
                                        </ol>
                                        <pre><code>&lt;iframe src="公开链接URL" 
        frameborder="0" 
        width="100%" 
        style="min-height: 300px;"&gt;&lt;/iframe&gt;</code></pre>
                                        <div class="alert alert-success mt-2">
                                            <small><i class="bi bi-puzzle"></i> 参考Vue.js组件LinkFormRender.vue的实现方式</small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="accordion-item">
                                <h2 class="accordion-header">
                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq5">
                                        Q: 如何确认公开链接功能正常工作？
                                    </button>
                                </h2>
                                <div id="faq5" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                                    <div class="accordion-body">
                                        <strong>A:</strong> 功能验证检查清单：
                                        <div class="row">
                                            <div class="col-md-6">
                                                <h6>基础功能</h6>
                                                <ul>
                                                    <li>✓ 公开链接可以正常访问</li>
                                                    <li>✓ 页面布局显示正常</li>
                                                    <li>✓ 申请信息完整显示</li>
                                                    <li>✓ 工作流状态正确</li>
                                                </ul>
                                            </div>
                                            <div class="col-md-6">
                                                <h6>集成功能</h6>
                                                <ul>
                                                    <li>✓ iframe嵌入正常</li>
                                                    <li>✓ PostMessage通信正常</li>
                                                    <li>✓ 高度自适应生效</li>
                                                    <li>✓ 移动端显示正常</li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <!-- 技术实现 -->
            <section id="implementation" class="mb-5">
                <div class="card">
                    <div class="card-header">
                        <h4 class="mb-0">💻 技术实现参考</h4>
                    </div>
                    <div class="card-body">
                        <div class="alert alert-info">
                            <i class="bi bi-info-circle"></i>
                            <strong>开发者参考</strong>：以下内容适合开发人员和系统管理员参考
                        </div>
                        
                        <h5><i class="bi bi-file-earmark-code"></i> 关键文件列表</h5>
                        <div class="table-responsive">
                            <table class="table table-sm table-bordered">
                                <thead class="table-light">
                                    <tr>
                                        <th>文件路径</th>
                                        <th>功能说明</th>
                                        <th>关键特性</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td><code>PublicDetails.cshtml</code></td>
                                        <td>公开查看页面</td>
                                        <td><span class="badge bg-primary">Layout=null</span> <span class="badge bg-info">PostMessage通信</span></td>
                                    </tr>
                                    <tr>
                                        <td><code>LinkFormRender.vue</code></td>
                                        <td>外链表单渲染组件</td>
                                        <td><span class="badge bg-success">高度自适应</span> <span class="badge bg-warning">事件监听</span></td>
                                    </tr>
                                    <tr>
                                        <td><code>OfficialSealApplicationController.cs</code></td>
                                        <td>控制器实现</td>
                                        <td><span class="badge bg-danger">FormLink设置</span> <span class="badge bg-secondary">工作流集成</span></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        
                        <h5><i class="bi bi-gear"></i> 配置要点</h5>
                        <div class="row">
                            <div class="col-md-6">
                                <h6>后端配置</h6>
                                <pre><code class="language-csharp">// FormLink动态构造
var formLink = $"{Request.Scheme}://{Request.Host}/OfficialSealApplication/PublicDetails/{id}";

// 工作流任务创建
var createDto = new CreateWorkTaskWithDefaultVersionInputDto
{
    EntityFullName = "OfficialSealApplication",
    EntityKeyValue = id.ToString(),
    FormLink = formLink,
    // ... 其他参数
};</code></pre>
                            </div>
                            <div class="col-md-6">
                                <h6>前端配置</h6>
                                <pre><code class="language-javascript">// PostMessage监听
window.addEventListener('message', function(event) {
    if (event.data && event.data.event === 'setFormIframeHeight') {
        iframe.style.height = event.data.height + 'px';
    }
});

// 高度消息发送
window.parent.postMessage({
    event: 'setFormIframeHeight',
    height: currentHeight
}, '*');</code></pre>
                            </div>
                        </div>
                        
                        <h5><i class="bi bi-list-check"></i> 开发检查清单</h5>
                        <div class="row">
                            <div class="col-md-6">
                                <h6>Controller层</h6>
                                <ul class="list-group list-group-flush">
                                    <li class="list-group-item">✓ PublicLinkDoc Action方法</li>
                                    <li class="list-group-item">✓ SubmitForApprovalWithPublicLink方法</li>
                                    <li class="list-group-item">✓ FormLink参数正确设置</li>
                                    <li class="list-group-item">✓ 异常处理机制</li>
                                </ul>
                            </div>
                            <div class="col-md-6">
                                <h6>View层</h6>
                                <ul class="list-group list-group-flush">
                                    <li class="list-group-item">✓ PublicLinkDoc.cshtml页面</li>
                                    <li class="list-group-item">✓ Details.cshtml入口按钮</li>
                                    <li class="list-group-item">✓ 响应式样式</li>
                                    <li class="list-group-item">✓ JavaScript功能</li>
                                </ul>
                            </div>
                        </div>
                        
                        <div class="alert alert-warning mt-3">
                            <h6><i class="bi bi-shield-check"></i> 安全提醒</h6>
                            <ul class="mb-0">
                                <li>生产环境请使用HTTPS协议</li>
                                <li>配置适当的CORS策略</li>
                                <li>考虑实施链接有效期控制</li>
                                <li>定期审计公开链接访问日志</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </div>
</div>

<!-- 自定义样式 -->
<style>
/* 时间线样式 */
.timeline {
    position: relative;
    padding-left: 20px;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #dee2e6;
}

.timeline-item {
    position: relative;
    margin-bottom: 20px;
    padding-left: 30px;
}

.timeline-marker {
    position: absolute;
    left: -8px;
    top: 0;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 0 2px #dee2e6;
}

.timeline-content h6 {
    margin-bottom: 5px;
    font-weight: 600;
}

.timeline-content p {
    margin-bottom: 5px;
    color: #495057;
}

/* 代码高亮样式 */
pre code {
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 0.375rem;
    padding: 1rem;
    font-size: 0.875rem;
    line-height: 1.5;
    display: block;
    overflow-x: auto;
}

/* 响应式调整 */
@@media (max-width: 768px) {
    .timeline {
        padding-left: 15px;
    }
    
    .timeline-item {
        padding-left: 25px;
    }
    
    .timeline-marker {
        left: -6px;
        width: 12px;
        height: 12px;
    }
}

/* 表格响应式 */
@@media (max-width: 576px) {
    .table-responsive table {
        font-size: 0.875rem;
    }
}
</style>

<!-- JavaScript功能增强 -->
<script>
// 文档页面功能增强
document.addEventListener('DOMContentLoaded', function() {
    // 平滑滚动到锚点
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
            e.preventDefault();
            const target = document.querySelector(this.getAttribute('href'));
            if (target) {
                target.scrollIntoView({
                    behavior: 'smooth',
                    block: 'start'
                });
            }
        });
    });
    
    // 代码块复制功能
    document.querySelectorAll('pre code').forEach(block => {
        const button = document.createElement('button');
        button.className = 'btn btn-sm btn-outline-secondary copy-btn';
        button.innerHTML = '<i class="bi bi-clipboard"></i>';
        button.style.cssText = 'position: absolute; top: 5px; right: 5px; z-index: 1;';
        button.title = '复制代码';
        
        block.parentElement.style.position = 'relative';
        block.parentElement.appendChild(button);
        
        button.addEventListener('click', function() {
            navigator.clipboard.writeText(block.textContent).then(() => {
                button.innerHTML = '<i class="bi bi-check"></i>';
                button.className = 'btn btn-sm btn-success copy-btn';
                setTimeout(() => {
                    button.innerHTML = '<i class="bi bi-clipboard"></i>';
                    button.className = 'btn btn-sm btn-outline-secondary copy-btn';
                }, 2000);
            }).catch(() => {
                // Fallback for older browsers
                const textarea = document.createElement('textarea');
                textarea.value = block.textContent;
                document.body.appendChild(textarea);
                textarea.select();
                document.execCommand('copy');
                document.body.removeChild(textarea);
                
                button.innerHTML = '<i class="bi bi-check"></i>';
                button.className = 'btn btn-sm btn-success copy-btn';
                setTimeout(() => {
                    button.innerHTML = '<i class="bi bi-clipboard"></i>';
                    button.className = 'btn btn-sm btn-outline-secondary copy-btn';
                }, 2000);
            });
        });
    });
});
</script>

<div class="alert alert-info mt-4" role="alert">
    <strong><i class="bi bi-lightbulb"></i> 提示：</strong>
    此说明文档详细介绍了公开链接功能的使用方法和技术实现。如有疑问，请联系系统管理员或查看相关技术文档。
</div>

<div class="mt-3">
    <a asp-action="Index" class="btn btn-secondary">
        <i class="bi bi-arrow-left"></i> 返回列表
    </a>
    <a asp-action="WorkflowWidgetIntegrationDoc" class="btn btn-outline-info ms-2" target="_blank">
        <i class="bi bi-puzzle"></i> 小部件集成文档
    </a>
</div>